import 'package:flutter/material.dart';
import '../../api/list_some_thing.dart';
import '../../definitions/color.dart';
import '../../definitions/system_aud.dart';
import '../../model/some_thing.dart';
import '../../widgets/choice_question_practice.dart';
import '../../widgets/some_thing_practice_option_card.dart';
import '../../wrappers/safe-area.dart';

class SomeThingPracticePage extends StatefulWidget {
  const SomeThingPracticePage({super.key});

  @override
  State<SomeThingPracticePage> createState() => _SomeThingPracticePageState();
}

class _SomeThingPracticePageState extends State<SomeThingPracticePage> {
  List<SomeThingInfo> someThingList = [];

  void loadData() {
    listSomeThing().then((res) {
      setState(() {
        someThingList = res;
      });
    });
  }

  @override
  void initState() {
    super.initState();
    loadData();
  }

  @override
  Widget build(BuildContext context) {
    return SafeAreaPageWrapper(
        padding: EdgeInsets.all(12),
        child: someThingList.isEmpty
            ? Center(
                child: Text('数据加载中'),
              )
            : ChoiceQuestionPractice<SomeThingInfo>(
                totalOptions: someThingList,
                tip: Text(
                  '请选出你听到的事物',
                  style: TextStyle(fontSize: 22),
                ),
                tipAud: SystemAud.someThingPracticeQuestion.value,
                renderQuestion: (SomeThingInfo answer,
                    List<SomeThingInfo> options, bool hasFocus) {
                  return Text(
                    '请选择${answer.title}（${answer.pinYin}）',
                    style: TextStyle(
                        color: hasFocus ? SchemeColor.seedColor.value : null,
                        fontFamily: 'PinYin',
                        fontSize: 22),
                  );
                },
                renderOption: (SomeThingInfo option, bool hasFocus) {
                  return SomeThingPracticeOptionCard(
                      someThing: option, hasFocus: hasFocus);
                },
                getQuestionAud:
                    (SomeThingInfo answer, List<SomeThingInfo> options) {
                  return answer.aud;
                },
              ));
  }
}
